<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>标签调试</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<style>
			#json{
				font-size: 16px;
			}
			.string { color: green; }
			.number { color: darkorange; }
		    .boolean { color: blue; }
		    .null { color: magenta; }
		    .key { color: red; }
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div ref='top' class="topfix">
				<van-cell-group>
				  <van-field
					label="openid"
					v-model="openid "
					placeholder="请输入openid"
					border="{{ false }}"
				  />
				</van-cell-group>
				<van-cell-group>
				  <van-field
					label="标签"
					v-model="tag"
					placeholder="请输入标签"
					border="{{ false }}"
				  />
				</van-cell-group>
				
				<div style="display: flex; justify-content: space-around;margin-top: 0.4rem;">
					<van-button size="small" @click="handleCreate()">创建</van-button>
					<van-button size="small" @click="handleGet()">全部</van-button>
					<van-button size="small" @click="handleBind()">绑定</van-button>
					<van-button size="small" @click="handleSearch()">查询</van-button>
					<van-button size="small" @click="handleDelete()">删除</van-button>
				</div>
			
			</div>
			
			<div ref='result' class="result" style="padding:0 10px;font-size: 0.4rem;overflow:scroll;margin-top: 20px;" :style='{height:scrollerHeight}'>
				<pre id='json' v-html='result'></pre>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from "../common/js/api/vue3-axios-utils.js";


		const PatientData = {
			data() {
				return {
					url: {
						getUrl:'/sys/wechat/tags',
						searchUrl:'/sys/wechat/tag/usertag',
						deleteUrl:'/sys/wechat/tag/remove',
						createUrl:'/sys/wechat/tag/add',
						bindUrl:'/sys/wechat/tag/binding'
					},
					openid:'',
					tag:'',
					result:''
					
				};
			},
			mounted(){
				this.$nextTick(()=>{
					let height = this.$refs.top.offsetHeight
					let h = window.innerHeight
					this.scrollerHeight = (h-height-30)+'px'
					console.log('height',height,this.scrollerHeight)
				})
			},
			created() {
				this.init()
			},
			methods: {
				async init () {
	           	},
	           	//全部
				handleGet(){
					getAction(spliceUrl(this.url.getUrl),{}).then((res) => {
						res = res.data
						console.log('handleGet',res)
						if(res.success){
							this.result = this.syntaxHighlight(res.result)
						}
					})
				},
				//删除
				handleDelete(){
					if(this.tag&&this.openid){
						postAction(spliceUrl(this.url.deleteUrl),{openid_list:[this.openid],tagid:this.tag}).then((res) => {
							res = res.data
							console.log('handleDelete',res)
							if(res.success){
								this.result = this.syntaxHighlight(res.result)
							}
						})
					}else if(!this.openid){
						this.$toast('请输入openid');
					}else if(!this.tag){
						this.$toast('请输入标签');
					}
				},
				// 创建
				handleCreate(){
					if(this.tag){
						postAction(spliceUrl(this.url.createUrl),{"name":this.tag}).then((res) => {
							res = res.data
							console.log('handleCreate',res)
							if(res.success){
								this.result = this.syntaxHighlight(res.result)
							}
						})
					}else{
						this.$toast('请输入标签');
					}
				},
				// 绑定
				handleBind(){
					if(this.tag&&this.openid){
						postAction(spliceUrl(this.url.bindUrl),{openid_list:[this.openid],tagid:this.tag}).then((res) => {
							res = res.data
							console.log('handleDelete',res)
							if(res.success){
								this.result = this.syntaxHighlight(res.result)
							}
						})
					}else if(!this.openid){
						this.$toast('请输入openid');
					}else if(!this.tag){
						this.$toast('请输入标签');
					}
				},
				handleSearch(){
					if(this.openid){
						postAction(spliceUrl(this.url.searchUrl),{openid_list:[this.openid],tagid:this.tag}).then((res) => {
							res = res.data
							console.log('handleSearch',res)
							if(res.success){
								this.result = this.syntaxHighlight(res.result)
							}
						})
					}else{
						this.$toast('请输入openid');
					}
				},
				// 方法实现
				syntaxHighlight(result){
				    if (typeof result != 'string') {
				        result = JSON.stringify(result, undefined, 2); //返回要JSON化的对象，2是spacing
				    }
				    result = result.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
				    return result.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
				    function(match) {
				        var cls = 'number';
				        if (/^"/.test(match)) {
				            if (/:$/.test(match)) {
				                cls = 'key';
				            } else {
				                cls = 'string';
				            }
				        } else if (/true|false/.test(match)) {
				            cls = 'boolean';
				        } else if (/null/.test(match)) {
							cls = 'null';
				        }
						return '<span style="color: green;">' + match + '</span>';
				    });
				}
			},
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>


